<template>
  <div class="table">
    <el-table
      :data="dataList"
      border
      stripe
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <!-- 展示复选框的列，用户动态决定是否展示 -->
      <template v-if="showCheckbox">
        <el-table-column type="selection" align="center"> </el-table-column>
      </template>
      <!-- 展示序号的列，用户动态决定是否展示 -->
      <template v-if="showIndex">
        <el-table-column type="index" width="60" align="center">
        </el-table-column>
      </template>
      <!-- 根据propList循环遍历指定长度的列和它的label并渲染对应数据 -->
      <template v-for="prop in propList">
        <el-table-column
          align="center"
          :prop="prop.prop"
          :label="prop.label"
          :min-width="prop.minWidth"
        >
          <template #default="{ row }">
            <slot :name="prop.slotName" :row="row">
              {{ row[prop.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
      <!-- 展示编辑或按钮的地方 -->
      <slot name="handle"> </slot>
    </el-table>
    <slot name="footer"></slot>
  </div>
</template>

<script setup lang="ts">
import { PropType } from '@vue/runtime-core'

defineProps({
  dataList: {
    type: Array as PropType<any[]>,
    required: true
  },
  propList: {
    type: Array as PropType<any[]>,
    required: true
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  showCheckbox: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['selectionChange'])
// 用户点击复选框时触发(如果用户有展示复选框)
const selectionChange = (selection: any[]) => {
  emit('selectionChange', selection)
}
</script>

<style scoped lang="less"></style>
